<template>
	<view :class="['container',{'dark':theme=='dark'}]">
		<!-- 商家设置昵称 -->
		<view class="main">

			<view :class="['income-card','funs',{'darksss':theme=='dark'}]">
				
				<u-field
					v-model="mobile" :label="$t('bico.W227')" :placeholder="$t('bico.W228')">
				</u-field>
			</view>
			
			<view class="mt30 h40 lh40 tc white bgBlue radius28 ft14 w90 mauto" @tap="confirm">{{$t('login.e_confrim')}}</view>
		</view>
	</view>
</template>
<script>
	import {domain} from '@/common/domain.js'
	import {mapState,mapActions,mapGetters} from 'vuex';
	import uniPopup from '@/components/uni-popup2.vue';
	import {nickName,legalMgrPage} from '../../common/apiString.js'
	import {myMixins} from '@/common/myMixins.js'//加入全局下拉刷新
	export default{
		mixins:[myMixins],
			components: {
				uniPopup
			},
			data() {
				return {
					isFinger:"0",
					token:'',
					info:'',
					fingerBool:0,
					faceBool:0,
					head:'../../static/rvm.png',
					value: '',
					type: 'text',
					border: true,
					mobile: '',
					code: '',
					myOtc:{}
					
				}
			},
			computed:{
				...mapState({
				  theme:state=>state.theme
				}),
				
			},
			onLoad() {
				uni.setNavigationBarTitle({
					title: this.$t('bico.W226'),
				})
				this.$utils.setTheme(this.theme);
				var myOtc = uni.getStorageSync('myOtc')
				this.myOtc=myOtc
				this.mobile=myOtc!=null ? myOtc.nickName:'' ;
			},
			methods: {
				confirm(){
					if(this.myOtc.realStatus!='1'){
						this.$utils.showLayer(this.$t('bico.W229'),);
						return
					}
					this.$utils.initDataToken({url:nickName,data:{nickName:this.mobile},type:'POST'},(res,msg)=>{
						if(msg.length == 0){
							this.$utils.initDataToken({
								url: legalMgrPage,
								type: 'post'
							}, (res, msg) => {
								this.myOtc = res
								uni.setStorageSync('myOtc', res);
								this.$utils.showLayer(this.$t('bico.W230'),);
								setTimeout(() => {
									uni.navigateBack();
									uni.navigateBack();
								}, 1500);
							})
							
						}else{
							this.$utils.showLayer(msg);
						}
						
					})
				},
				//路由开始
				funsItemClick(index){
					if(index==1){
						uni.navigateTo({
							url:''//路由
						})
					};
					
				},
				//路由结束
			},
		}
</script>
<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.avatar{		
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.avatar {
		
	    background: #ffffff0a;
	    border-radius: 50%;
	    width: 16vw;
	    height: 16vw;
	    overflow: hidden;
	    border: 1vw solid #ffffff14;
	    position: relative;
	    display: inline-block;
	    vertical-align: top;
	    text-align: center;
	}
	.container {
		width: 100%;
		height: 100%;
		
		.userinfo-card {
			.card-box {
				width: 100%;
				height: 120px;
				position: relative;
				z-index: 0;

				.user-section {
					position: absolute;
					top: 0;
					z-index: 10;
					width: 100%;
					padding: 50upx 30upx 210upx;
					display: flex;

					.avatar-wrap {
						width: 100upx;
						height: 100upx;
						border-radius: 50%;
						overflow: hidden;
						position: relative;
						top: 1.2vw;

						.avatar {
							width: 100%;
							height: 100%;
						}
					}

					.portrait-box {
						margin-left: 18upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.info-box {
							font-size: 38upx;
							
							font-weight: bold;
							color: #333;
						}

						.tuan {
							display: flex;
							align-items: center;

							.ma {
								font-size: 3.6vw;
								
								font-weight: 600;
								
							}

							.fuzi {
								width: 64upx;
								height: 34upx;
								background: #CCCCCC;
								border-radius: 15upx;
								font-size: 20upx;
								
								font-weight: 500;
								
								text-align: center;
								line-height: 34upx;
								margin-left: 10upx;
							}
						}
					}
				}

				.balance-card-wrap {
					width: 100%;
					height: 200upx;
					padding: 0 20upx;
					position: absolute;
					bottom: 0;
					z-index: 10;

					.balance-card {
						width: 100%;
						height: 200upx;
						background: linear-gradient(135deg,#007AFF 30%,#2946e6 80%);
						background-image: url(../../static/business/tbzjbg.png);
						background-position: 0% 0%;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						border-radius: 20upx;
						padding: 30upx;

						.tit {
							
							font-weight: bold;
							color: #FFF;
							font-size: 4.2vw;
							position: absolute;
							top: 3vw;
							right: 10vw;
							left: 6vw;
						}

						.xia {
							width: 100%;
							display: flex;
							justify-content: space-between;

							.num {
								font-size: 70upx;
								
								font-weight: bold;
								color: #FFF;
							}

							.withdraw-btn {
								width: 75px;
								height: 30px;
								line-height: 30px;
								text-align: center;
								background: #243eccad;
								font-size: 12px;
								
								font-weight: 500;
								color: #FFF;
								border-radius: 2vw;
								position: relative;
								top: 0vw;
							}
						}
					}
				}
			}

		}


		.main {
			
			.u-field {
			    font-size: 14px;
				padding: 20px 0px;
				text-align: left;
				position: relative;
				color: #676767;
				
			}
			padding: 20upx;

			.income-card {
				width: 100%;
				background-color: #fff;
				border-radius: 1vw;
				    padding: 0vw 4vw;
				margin-top: 20upx;

				.tit {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 3.6vw;
					line-height: 32upx;
					
					font-weight: bold;
					

					image {
						width: 10upx;
						height: 21upx;
					}
				}

				.show-content {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 40upx;

					.view-category {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.num {
							font-size: 3.6vw;
							
							font-weight: 600;
							position: relative;
							top: -1vw;
							
						}
						
						.funsItemImage {
							position: relative;
							top: -1vw;
						    width: 6vw;
						    height: 6vw;
						    border-radius: 50%;
						}

						.text {
							font-size: 3vw;
							
							font-weight: 700;
							
						}
					}

					.line {
						width: 1px;
						height: 65upx;
						background-color: #5559691f;
					}
				}
			}

			.tool-card {
				background-color: #ffffff;
				width: 100%;
				padding: 0 30upx;
				margin-top: 20upx;
				border-radius: 20upx;

				.tool-item {
					display: flex;
					flex-direction: row;
					width: 100%;
					height: 100upx;
					align-items: center;
					justify-content: space-between;

					.view-image-left {
						width: 44upx;
					}

					.item-right {
						flex: 1;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						.view-text {
							margin-left: 0px;
							font-size: 3.4vw;
							
							font-weight: bold;
							
						}
						
						.view-image-right {
							width: 10upx;
							height: 21upx;
						}
						
						.funsItemImage {
						    width: 6vw;
						    height: 6vw;
						    border-radius: 50%;
						}
						
					}
				}
			}
		}
	}
	.radius28 {
	    border-radius: 2vw;
	}
	.w90 {
	    width: 90%;
	}
	.u-border-bottom:after, .u-border-left:after, .u-border-right:after, .u-border-top-bottom:after, .u-border-top:after, .u-border:after {
	    content: ' ';
	    position: absolute;
	    left: 0;
	    top: 0;
	    pointer-events: none;
	    box-sizing: border-box;
	    -webkit-transform-origin: 0 0;
	    transform-origin: 0 0;
	    width: 199.8%;
	    height: 199.7%;
	    -webkit-transform: scale(0.5, 0.5);
	    transform: scale(0.5, 0.5);
	    border: 0 solid #e4e7ed36 !important;
	    z-index: 2;
	}
</style>
